<template>
	<view class="">
		<scroll-view scroll-y="true" >
			<view class="content">
						<view class="profit_top">
							<view :class="day==15?'profit_b active':'profit_b'" @click="clickTab(15)">
								15天
							</view>
							<view  :class="day==30?'profit_b active':'profit_b'" @click="clickTab(30)">
								30天
							</view>
						</view>
						<view class="charts-box">
							<l-f2 ref="chart"></l-f2>
						</view>
						<view class="profit_view">
							<view class="g">参与天数{{iconInfo.day}}天</view>
							<view class="r">昨日收益{{iconInfo.yesterIncome}}</view>
							<view class="r">累计收益{{iconInfo.totalIncome}}</view>
						</view>
						<view class="profit_list">
							<view class="profit_title">
								明细（显示最近7天细则）
							</view>
							<view class="profit_itemt">
								<view>日期</view>
								<view>设备收益</view>
								<view>推广加成</view>
								<view>推广收益</view>
							</view>
							<view class="profit_item" v-for="(item,index) in iconInfo.list" :key="index" @click="jump(`./profitInfo?date=${item.date}`)">
								<view>{{item.date}}</view>
								<view>+{{item.flow}}</view>
								<view>+{{item.money}}</view>
								<view>
									<view>+{{item.point}}</view>
									<image src="/static/newProject/equipment/icon_r.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
		</scroll-view>
		<view style="height: 170upx;">
			
		</view>
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import F2 from '@antv/f2';
	export default {
		data() {
			return {
				iconInfo:{
					
				},
				lineData:[],
				day:15,
			};
		},
		watch:{
			lineData(){
				this.xrDom()
			}
		},
		onShow() {
			//模拟从服务器获取数据
			this.getServerData()
		},
		mounted() {
					this.xrDom()
				},
		methods: {
			xrDom(){
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.source(this.lineData, {
					value: {
						tickCount: 5,
						min: 0
					},
					date: {
						type: 'timeCat',
						range: [ 0, 1 ],
						tickCount: 4,
						mask: 'MM-DD'
					}
					});
					chart.tooltip({
					custom: true,
					showXTip: true,
					showYTip: true,
					snap: true,
					crosshairsType: 'xy',
					crosshairsStyle: {
						lineDash: [ 1 ]
					}
					});
					chart.axis('date', {
					label: function label(text, index, total) {
						const textCfg = {
							 stroke: '#999999'
						};
						if (index === 0) {
						textCfg.textAlign = 'left';
						} else if (index === total - 1) {
						textCfg.textAlign = 'right';
						}
						return textCfg;
					}
					});
					chart.line().position('date*value').color('#5990FF').size(1.2);
					chart.render();
					return chart;
				});
			},
			clickTab(day){
				this.day = day
				this.chartsDataLine1=[]
				this.getServerData()
			},
			jump(url){
				this.$fun.jump(url)
			},
			getServerData() {
				let data = []
				this.$fun.ajax.post('butt/incomeCount',{day:this.day}).then(res=>{
					this.lineData =
					this.$fun.setArr(res.data.date,res.data.flow)
				})
				this.$fun.ajax.post('butt/incomeList',{}).then(res=>{
					this.iconInfo=res.data
				})
			}
		}
	};
</script>

<style lang="scss">
	page{
		background: #EEEEEE;
	}
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		background: #FFFFFF;
		
		.profit_top {
			display: flex;
			justify-content: space-around;
			margin-bottom: 100rpx;

			.profit_b {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 60rpx;
				background: #EEEEEE;
				border-radius: 30rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.active {
				background: #5990FF;
				color: #FFFFFF;
			}
		}

		.charts-box {
			width: 100%;
			height: 600rpx;
			padding-right: 30rpx;
		}

		.profit_view {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;

			.g {
				color: #333333;
			}

			.r {
				color: #5990FF;
			}
		}

		.profit_list {
			padding: 24rpx 30rpx;
			background: #EEEEEE;

			.profit_title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				color: #333333;
			}

			.profit_itemt {
				margin-top: 30rpx;
				height: 80rpx;
				background: #F6F6F6;
				display: flex;
				justify-content: space-between;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				align-items: center;

				view{
					width: 25%;
					text-align: center;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					color: #999999;
				}
				view:not(:nth-child(1)){
					text-align: left;
				}
			}

			.profit_item {
				height: 100rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				align-items: center;
				view{
					display: flex;
					justify-content: space-between;
					width: 25%;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					color: #FF0000;
					text-align: center;

					image{
						width: 14rpx;
						height: 24rpx;
						margin-right: 20rpx;
					}
				}
				view:nth-child(1){
					width: 25%;
					color: #333333;
					display: flex;
					justify-content: center;
				}
				view:not(:nth-child(1)){
					width: 25%;
					text-align: left;
					color: #FF0000;
				}
			}
		}
	}
</style>
